<form nz-form class="user-list-search-form">
    <div nz-row>
        <div nz-col nzXl="8" nzXXl="6">
            <nz-form-item class="ant-form-item">
                <nz-form-control>
                    <button nz-button nzType="primary" nzSize="small" (click)="showUserFormDialog()">
                        <span nz-icon nzType="plus" nzTheme="outline"></span>
                        创建用户
                    </button>
                    <button nz-button nzType="primary" nzDanger nzSize="small" [disabled]="setOfCheckedId.size == 0">
                        <span nz-icon nzType="delete" nzTheme="outline"></span>
                        删除用户
                    </button>
                </nz-form-control>
            </nz-form-item>
        </div>

        <div nz-col nzXl="6" nzXXl="6">
            <nz-form-item class="ant-form-item">
                <nz-form-label [nzFor]="'username'">用户名</nz-form-label>
                <nz-form-control>
                    <input nz-input [attr.id]="'username'" [(ngModel)]="username"
                           [ngModelOptions]="{standalone: true}" nzSize="small"/>
                </nz-form-control>
            </nz-form-item>
        </div>

        <div nz-col nzXl="6" nzXXl="6">
            <nz-form-item class="ant-form-item">
                <nz-form-label>角色</nz-form-label>
                <nz-form-control>
                    <nz-select [(ngModel)]="this.roleCode" [ngModelOptions]="{standalone: true}" nzSize="small"
                               [nzPlaceHolder]="'请选择角色'"
                    >
                        @for (role of this.roles; track role.roleCode) {
                            <nz-option [id]="role.roleId" [nzLabel]="role.roleName"
                                       [nzValue]="role.roleCode"></nz-option>
                        }
                    </nz-select>
                </nz-form-control>
            </nz-form-item>
        </div>

        <div nz-col nzXl="6" nzXXl="6">
            <nz-form-item class="ant-form-item">
                <nz-form-label [nzFor]="'nickname'">昵称</nz-form-label>
                <nz-form-control>
                    <input nz-input [attr.id]="'nickname'" [(ngModel)]="nickname"
                           [ngModelOptions]="{standalone: true}" nzSize="small"/>
                </nz-form-control>
            </nz-form-item>
        </div>
        <div nz-col nzXl="4" nzXXl="6">
            <nz-form-item class="ant-form-item">
                <nz-form-control>
                    <button nz-button [nzType]="'primary'" nzSize="small" (click)="search()">
                        <span nz-icon nzType="search" nzTheme="outline"></span>查询
                    </button>
                    <button nz-button nzSize="small" (click)="resetForm()">
                        <span nz-icon nzType="reload" nzTheme="outline"></span>重置
                    </button>
                </nz-form-control>
            </nz-form-item>
        </div>
    </div>
</form>

<!-- START 表格 -->
<div class="search-result-list">
    <nz-table
        nzShowSizeChanger
        [nzData]="listOfUser"
        [nzFrontPagination]="false"
        [nzLoading]="loading"
        [nzTotal]="total"
        [nzPageSize]="pageSize"
        nzSize="small"
        (nzQueryParams)="onQueryParamsChange($event)"
    >
        <thead>
        <tr>
            @for (col of cols; track col.field) {
                @if (col.field == 'id') {
                    <th [nzChecked]="checked"
                        (nzCheckedChange)="onAllChecked($event)"
                        [nzIndeterminate]="indeterminate"
                    >
                    </th>
                } @else {
                    @if (col.sortable == true) {
                        <th [nzColumnKey]="col.field" [nzSortFn]="col.sortable"
                            style="font-weight: bold;">{{ col.header }}
                        </th>
                    } @else {
                        <th style="font-weight: bold;">{{ col.header }}</th>
                    }
                }
            }
        </tr>
        </thead>
        <tbody>
            @for (data of listOfUser; track data.id) {
                <tr>
                    <td [nzChecked]="setOfCheckedId.has(data.id)"
                        (nzCheckedChange)="onItemChecked(data.id, $event)"
                    >
                    </td>
                    <td>{{ data.avatar }}</td>
                    <td>{{ data.username }}</td>
                    <td>{{ data.realName }}</td>
                    <td>{{ data.nickname }}</td>
                    <td>{{ data.roleName }}</td>
                    <td>{{ data.phone }}</td>
                    <td>{{ data.email }}</td>
                    <td>{{ data.accountNonExpired }}</td>
                    <td>{{ data.accountNonLocked }}</td>
                    <td>{{ data.credentialsNonExpired }}</td>
                    <td>{{ data.enabled }}</td>
                    <td>{{ data.gender }}</td>
                    <td>{{ data.position }}</td>
                    <td>{{ data.remark }}</td>
                    <td>{{ data.createdTime }}</td>
                    <td>{{ data.lastUpdatedTime }}</td>
                    <td>操作</td>
                </tr>
            }
        </tbody>
    </nz-table>
</div>
<!-- END 表格 -->

<!-- START 新增、编辑用户表单 -->
@if (userFormDialogDisplay) {
    <app-user-edit-form [(userFormDialogDisplay)]="userFormDialogDisplay" [userId]="userId" [formTitle]="formTitle"
                        (triggerUserListRefreshEmitter)="search()"
    >

    </app-user-edit-form>
}

<!-- END 新增、编辑用户表单 -->
